<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>员工列表</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        body {
            padding: 20px;
        }
        .delBtn {
            padding: 0 12px;
            font-size: 12px;
        }
    </style>
</head>

<body>


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">搜索</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group col-md-2">
                <div class="input-group-addon">ID</div>
                <input type="text" class="form-control" id="staffId" placeholder="ID">
            </div>
            <div class="input-group col-md-3">
                <div class="input-group-addon">姓名</div>
                <input type="text" class="form-control" id="staffName" placeholder="姓名">
            </div>
            <div class="input-group col-md-2">
                <div class="input-group-addon">性别</div>
                <select id="gender" class="form-control">
                    <option></option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="input-group col-md-3">
                <div class="input-group-addon">部门</div>
                <select id="dept" class="form-control">
                    <option></option>
                </select>
            </div>

            <button id="searchBtn" type="button" class="btn btn-primary">搜索</button>
            <button id="addBtn" type="button" class="btn btn-primary">添加</button>

        </div>
    </div>

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>

    <script>
        $(function () {
            /**
             * 获取员工列表
             **/
            function getStaffList() {
                $.ajax({
                    url: "http://localhost:8080/staff/getStaff",
                    type: "get",
                    dataType: "json",
                    // jsonp:'callback',
                    // jsonpCallback:"mycallback",
                    error: function (data) {
                        // alert(data.status)
                        alert("失败：" + JSON.stringify(data));
                    },
                    success: function (data) {
                        writeList(data)
                    }
                })
            }
            getStaffList()

            /**
             * 获取部门列表
             **/
            function getDeptList() {
                $.ajax({
                    url: "http://localhost:8080/staff/getDept",
                    type: "get",
                    dataType: "json",
                    error: function (data) {
                        alert("失败：" + JSON.stringify(data));
                    },
                    success: function (data) {
                        var rows = []
                        $.each(data, function (i, item) {
                            rows.push(`
                            <option value="${item.id}">${item.name}</option>
                            `)
                        })
                        $('#dept').append(rows.join(''))
                    }
                })
            }
            getDeptList()

            /**
             * 删除员工
             **/
            $('#tb').on('click', '.delBtn', function () {
                delStaff($(this).attr('data-id'))
            })
            function delStaff(staffId) {
                $.ajax({
                    url: "http://localhost:8080/staff/delStaff",
                    type: "post",
                    data: { id: staffId },
                    error: function (e) {
                        alert(e)
                    },
                    success: function (data) {
                        // alert('success')
                        getStaffList()
                    }
                })
            }

            /**
             * 添加员工
             **/
            $('#addBtn').on('click', function () {
                var staffName = $('#staffName').val()
                var gender = $('#gender').val()
                var dept = $('#dept').val()
                if (staffName === '' || gender === '0' || dept === '0'){
                    alert("姓名、性别、部门不能为空!")
                    return
                }
                addStaff(staffName, gender, dept)
                getStaffList()
                clear()
            })
            function addStaff(name, gender, dept) {
                $.ajax({
                    url: "http://localhost:8080/staff/addStaff",
                    type: "post",
                    data: { name: name, gender: gender, dept: dept },
                    error: function (e) {
                        alert(e)
                    },
                    success: function (data) {
                        getStaffList()
                    }
                })
            }

            /**
             * 搜索
             **/
            $('#searchBtn').on('click', function () {
                var staffId = $('#staffId').val()
                var staffName = $('#staffName').val()
                var gender = $('#gender').val()
                var dept = $('#dept').val()
                searchStaff(staffId, staffName, gender, dept)
                clear()
            })
            function searchStaff(id, name, gender, dept) {
                $.ajax({
                    url: "http://localhost:8080/staff/searchStaff",
                    type: "get",
                    data: {id: id, name: name,gender: gender, dept: dept},
                    dataType: "json",
                    error: function (data) {
                        alert("失败：" + JSON.stringify(data));
                    },
                    success: function (data) {
                        writeList(data)
                    }
                })
            }
        })

        /**
         * 列表渲染
         **/
        function writeList(data) {
            var rows = []
            $.each(data, function (i, item) {
                rows.push(`
                            <tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.gender}</td>
                                <td>${item.deptName}</td>
                                <td><button type="button" class="delBtn btn btn-danger" data-id="${item.id}">删除</button></td>
                            </tr>
                            `)
            })
            $('#tb').empty().append(rows.join(''))
        }

        /**
         * 清空输入框
         **/
        function clear() {
            $('#staffId').val('')
            $('#staffName').val('')
            $('#gender').val('')
            $('#dept').val('')
        }
    </script>

</body>

</html>
